<template>
	<view class="tx">
		<headertop title="提现" str1="oridei"></headertop>
		<view class="txback">

		</view>
		<view class="txcard">
			<view class="dqtixiantext">
				<view class="t1">
					当前可提现金额
				</view>
				<view class="t2">
					{{ Number(userobj.txmoney).toFixed(2)}}
				</view>
			</view>
		</view>
		<view class="txjine">
			<view class="center">
				<view class="t1">
					提现金额
				</view>
				<view class="jineline">
					<view class="left">
						<view class="danwei">
							￥
						</view>
						<input type="digit" v-model="money" placeholder="请输入提现金额" />
					</view>
					<view class="alltx" @click="allclick">
						全部提现
					</view>
				</view>
				<view class="tixianzhiline">
					<view class="title">
						提现至
					</view>
					<view class="yinhkinfo" @click="xz">
						<image src="https://shop.hacuu.com/static/Frame@2x (24).png" class="yl" mode=""></image>
						<span
							v-if="list.length&&!list1.length">{{list[0].account_header}}（{{list[0].account_no.slice(-4)}}）</span>
						<span
							v-if="list.length&&list1.length">{{list1[0].account_header}}（{{list1[0].account_no.slice(-4)}}）</span>
						<image src="https://shop.hacuu.com/static/Frame@2x (8).png" class="arrowright" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="sqtx" @click="sqtx">
			申请提现
		</view>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		account,
		userinfo,
		apply
	} from '@/api/my.js'
	import {
		onPageScroll,
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const userobj = ref({})
	const list = ref([])
	const money = ref('')
	const list1 = ref([])
	onShow(() => {
		list.value = []
		list1.value = []
		getuser()
	})

	function allclick() {
		money.value = userobj.value.txmoney.toFixed(2)
	}
	async function sqtx() {
		var bid = ''
		if (list.value.length && !list1.value.length) {
			bid = list.value[0]['id']
		}
		if (list.value.length && list1.value.length) {
			bid = list1.value[0]['id']
		}
		if (!bid) {
			uni.showToast({
				title: '请添加提现账户',
				icon: 'none'
			})
			return
		}
		if (!money.value) {
			uni.showToast({
				title: '请输入提现金额',
				icon: 'none'
			})
			return
		}
		const res = await apply({
			money: money.value,
			bid
		})
		if (res.code == 1) {
			uni.navigateBack()
			uni.showToast({
				title: '申请成功',
				icon: 'none'
			})
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
	async function getuser() {
		const res = await userinfo()
		if (res.code == 1) {
			userobj.value = res.data
			init()
		}
	}
	async function init() {
		const res = await account({
			type: 'bank'
		})
		if (res.code == 1) {
			list.value = res.data
			if (uni.getStorageSync('zhId')) {
				var zid = uni.getStorageSync('zhId')
				list1.value = res.data.filter(item => item.id == zid)
				uni.removeStorageSync('zhId')
			}
			console.log(list.value, 'list.valuelist.valuelist.value');
		}
	}

	function xz() {
		uni.navigateTo({
			url: '/pages/my/zhgl?typestr=dz'
		})
	}
</script>

<style lang="scss">
	.tx {
		width: 100%;
		overflow: hidden;
		position: relative;

		.sqtx {
			width: 686rpx;
			height: 82rpx;
			background: linear-gradient(#CD936A 0%, #F5C89D 100%);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			text-align: center;
			line-height: 82rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 768rpx;
		}

		.txback {
			width: 100%;
			height: 530rpx;
			background: linear-gradient(180deg, #FCE6CD 0%, rgba(252, 230, 205, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.txjine {
			width: 100%;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			background: #fff;
			overflow: hidden;
			margin-top: -140rpx;

			.center {
				width: 686rpx;
				overflow: hidden;
				margin: auto;

				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #1D2129;
					margin-top: 32rpx;
				}

				.tixianzhiline {
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #1D2129;
					}

					.yinhkinfo {
						margin-left: 286rpx;
						display: flex;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #1D2129;

						.yl {
							width: 36rpx;
							height: 36rpx;
							margin-right: 12rpx;
						}

						.arrowright {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}

				.jineline {
					width: 100%;
					overflow: hidden;
					display: flex;
					border-bottom: 2rpx solid #C9CDD4;
					align-items: center;
					justify-content: space-between;
					margin-top: 46rpx;

					.alltx {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						align-items: center;
						display: flex;
						color: #A46F3A;
						text-decoration: underline;
					}

					.left {
						display: flex;
						align-items: center;

						.danwei {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 56rpx;
							color: #333333;
							margin-right: 12rpx;
						}
					}

				}
			}
		}

		.txcard {
			width: 686rpx;
			height: 372rpx;
			background: rgba(216, 189, 114, 0.37);
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(154, 131, 99, 0.19);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: auto;
			margin-top: 192rpx;
		}

		.dqtixiantext {
			margin-left: 36rpx;
			margin-top: 52rpx;
			overflow: hidden;

			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #926322;
				margin-top: 52rpx;
			}

			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 56rpx;
				color: #642D13;
				margin-top: 40rpx;
			}
		}
	}
</style>